<!-- 个人记录 -->
<template>
  <div class="PersonalRecords-container" v-if="historyRef">
    <div class="percentage">
      <div class="left">
        <p class="num">{{ historyRef.percentage }}</p>
        <p class="text">{{ props.PersonalRecordsData }}</p>
      </div>
    </div>
    <div class="history">
      <div class="content">
        <div class="item" v-for="item in historyRef.rows" :key="item.id">
          <p>{{ item.time }}</p>
          <p>{{ item.text }}</p>
        </div>
      </div>
      <div class="paging">
        <Paging
          :total="PagingDataRef.total"
          :page="PagingDataRef.page"
          :showPage="PagingDataRef.showPage"
          @click="changePage"
        ></Paging>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import Paging from "@/components/paging/index.vue";
import {getCheckInRecords} from "@/api/user.js"
import { ref,watchEffect } from "vue";
const props = defineProps({
    screenTime: { // 时间(起始时间,终止数据)
    type: Object,
    default: () => ({}),
  },
  obtainWho:{ // 需要查询谁
    type: Number,
    required:true
  },
  PersonalRecordsData:{ // 页面静态文字
    type: String,
    default: ""
  }
});
// 分页组件信息
const PagingDataRef = ref({
  total: 0, // 数据数
  page: 1, // 当前页
  showPage: 2, // 需要显示多少页码
});
const historyRef = ref(null) // 远程信息

// 获取数据库信息
watchEffect(async () => {
    const {data} = await getCheckInRecords({
        page: PagingDataRef.value.page,
        obtainWho:props.obtainWho,
        startingTime: props.screenTime.startingTime.utcDate,
        endTime:props.screenTime.endTime.utcDate
    })
    historyRef.value = data
    PagingDataRef.value.total = historyRef.value.total
    historyRef.value.rows = historyRef.value.rows.map(item => {
            switch(item.CheckInStatus){
                case -1:
                item.text = "未打卡"
                break;
                case 1:
                item.text = "按时打卡"
                break;
                case 0:
                item.text = "未按时打卡"
                break;
                default:
                item.text = "已打卡"
                break;
            }
        return {
            ...item,
            time: moment(item.time).format("YYYY-MM-DD")
        }
    })
})

// 改变页码
function changePage(index) {
  PagingDataRef.value.page = index;
}
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.PersonalRecords-container {
  width: 100%;
  height: 100%;
  display: flex;

  .percentage {
    flex: 1;
    height: 100%;
    position: relative;
    .left {
      .self-center();
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: linear-gradient(45deg, @frameColor1, @frameColor2);
      text-shadow: 2px 2px 10px #3b3b3b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      p {
        margin: 10px;
      }
      .num {
        font-size: 45px;
        color: @white;
        font-weight: bold;
      }
      .text {
        color: @white;
        font-size: 16px;
      }
    }
  }
  .history {
    height: 100%;
    flex: 2;

    padding: 10px;
    .content {
      height: 80%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 49%;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        // background: @gray;
        text-shadow: 2px 2px 10px #3b3b3b;
        border: 1px dashed @gray;
        color: @white;
        display: flex;
        justify-content: space-between;
        align-content: center;
        border-radius: 5px;
      }
    }
    .paging {
      height: 20%;
    }
  }
}
</style>